<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <section class="content">
                <div class="row">
                    <div class="col-xs-9"><p class="lead">Marketplace</p></div>
                    <!--<div class="col-xs-3">
                        <button type="button" class="btn btn-info btn-block"
                            id="upload-button"
                            data-toggle="modal" data-target="#upload-modal"
                        >Upload</button>
                    </div>-->
                </div>
                <h1 class="text-center">Welcome to the Marketplace of Platform for AI</h1>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <form class="input-group" id="search">
                            <input type="search" class="form-control" name="query"
                                placeholder="Search job, docker script, and data on Platform for AI">
                            <span class="input-group-btn">
                                <button class="btn btn-info" type="submit" aria-label="Search">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                </button>
                            </span>
                        </form>
                    </div>
                </div>
            </section>
            <section class="content">
                <h2 class="h4">
                    <span>Job</span>
                    <a class="h5 pull-right hidden">See more &gt;</a>
                </h2>
                <div class="clearfix" style="position: relative" id="marketplace-jobs">
                    <a class="btn btn-link" id="marketplace-jobs-prev">
                        <span class="glyphicon glyphicon-menu-left"></span>
                    </a>
                    <div>
                    </div>
                    <a class="btn btn-link" id="marketplace-jobs-next">
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </a>
                </div>
            </section>
        </div>
    </div>
</div>
<div class="container-fluid" style="background-color: white">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <section class="content">
                <h2 class="h4">
                    <span>Docker</span>
                    <a class="h5 pull-right hidden">See more &gt;</a>
                </h2>
                <div class="clearfix" style="position: relative" id="marketplace-dockers">
                    <a class="btn btn-link" id="marketplace-dockers-prev">
                        <span class="glyphicon glyphicon-menu-left"></span>
                    </a>
                    <div>
                    </div>
                    <a class="btn btn-link" id="marketplace-dockers-next">
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </a>
                </div>
            </section>
            <hr>
            <section class="content">
                <h2 class="h4">
                    <span>Script</span>
                    <a class="h5 pull-right hidden">See more &gt;</a>
                </h2>
                <div class="clearfix" style="position: relative" id="marketplace-scripts">
                    <a class="btn btn-link" id="marketplace-scripts-prev">
                        <span class="glyphicon glyphicon-menu-left"></span>
                    </a>
                    <div>
                    </div>
                    <a class="btn btn-link" id="marketplace-scripts-next">
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </a>
                </div>
            </section>
            <hr>
            <section class="content">
                <h2 class="h4">
                    <span>Data</span>
                    <a class="h5 pull-right hidden">See more &gt;</a>
                </h2>
                <div class="clearfix" style="position: relative" id="marketplace-datas">
                    <a class="btn btn-link" id="marketplace-datas-prev">
                        <span class="glyphicon glyphicon-menu-left"></span>
                    </a>
                    <div>
                    </div>
                    <a class="btn btn-link" id="marketplace-datas-next">
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </a>
                </div>
            </section>
        </div>
    </div>
</div>
<div class="modal fade" id="upload-modal" tabindex="-1" role="dialog" aria-labelledby="upload-modal-title">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="upload-modal-title">Upload New Item</h4>
            </div>
            <div class="modal-body">
                <div class="row" id="upload-body-select">
                    <div class="col-md-12 col-md-offset-0">
                        <div class="row">
                            <div class="col-md-3">
                                <button type="button" id="upload-docker" class="btn btn-default btn-lg btn-block">Upload<br>Docker</button>
                            </div>
                            <div class="col-md-3">
                                <button type="button" id="upload-script" class="btn btn-default btn-lg btn-block">Upload<br>Script</button>
                            </div>
                            <div class="col-md-3">
                                <button type="button" id="upload-data" class="btn btn-default btn-lg btn-block">Upload<br>Data</button>
                            </div>
                            <div class="col-md-3">
                                <label for="upload-yaml" class="btn btn-default btn-lg btn-block">Upload<br>Job Yaml</label>
                                <input type="file" id="upload-yaml" name="upload-yaml" class="file hidden" title="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden" id="upload-body-form-container">
                    <form id="upload-body-form">
                    </form>
                    <div class="text-center" id="upload-submit">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
                <div class="text-center hidden" id="upload-body-success">
                    <p class="h1"><span class="glyphicon glyphicon-ok-circle"></span></p>
                    <p class="lead">Uploaded successfully.</p>
                </div>
            </div>
        </div>
    </div>
</div>